window.onload = function () {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const image = new Image();
  const btn = document.getElementById("btn");
  const lensRaduis = canvas.height / 4;
  let sunglassOn = false;
  const sunglassFilter = new Worker("sunglassFilter.js");
  const offscreenCanvas = document.createElement("canvas");
  // const offscreenCanvas = document.getElementById("offscreenCanvas");
  const offscreenCtx = offscreenCanvas.getContext("2d");
  offscreenCanvas.width = canvas.width;
  offscreenCanvas.height = canvas.height;
  function drawOriginalPicture() {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  }

  function drawLenses(leftLensLocation, rightLensLocation) {
    ctx.save();

    ctx.beginPath();
    moveTo(leftLensLocation.x, leftLensLocation.y);
    ctx.arc(
      leftLensLocation.x,
      leftLensLocation.y,
      lensRaduis,
      0,
      Math.PI * 2,
      false
    );

    ctx.stroke();
    moveTo(rightLensLocation.x, rightLensLocation.y);
    ctx.arc(
      rightLensLocation.x,
      rightLensLocation.y,
      lensRaduis,
      0,
      Math.PI * 2,
      false
    );

    ctx.stroke();
    ctx.clip();
    ctx.drawImage(offscreenCanvas, 0, 0, canvas.width, canvas.height);
    ctx.restore();
  }

  function drawWire(center) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(center.x - lensRaduis / 4, center.y - lensRaduis / 2);
    // CanvasRenderingContext2D.quadraticCurveTo() 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点，第二个点是终点。 起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。
    ctx.quadraticCurveTo(
      center.x,
      center.y - lensRaduis + 20,
      center.x + lensRaduis / 4,
      center.y - lensRaduis / 2
    );
    ctx.stroke();
    ctx.restore();
  }
  function drawConnectors(center) {
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = "sliver";
    ctx.strokeStyle = "rgba(0,0,0,0.4)";
    ctx.lineWidth = 2;
    // void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    ctx.arc(
      center.x - lensRaduis / 4,
      center.y - lensRaduis / 2,
      4,
      0,
      Math.PI * 2,
      false
    );
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(
      center.x + lensRaduis / 4,
      center.y - lensRaduis / 2,
      4,
      0,
      Math.PI * 2,
      false
    );
    ctx.fill();
    ctx.stroke();
    ctx.restore();
  }
  function putSunglassesOn() {
    var imagedata,
      center = {
        x: canvas.width / 2,
        y: canvas.height / 2,
      },
      leftLensLocation = {
        x: center.x - lensRaduis - 10,
        y: center.y,
      },
      rightLensLocation = {
        x: center.x + lensRaduis + 10,
        y: center.y,
      };
    imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // Worker 接口的 postMessage()方法向worker的内部作用域发送一个消息。这接受单个参数，这是要发送给worker的数据。数据可以是由结构化克隆算法处理的任何值或JavaScript对象，其包括循环引用
    // myWorker.postMessage(aMessage, transferList);
    // aMessage
    // The object to deliver to the worker; this will be in the data field in the event delivered to the DedicatedWorkerGlobalScope.onmessage handler.
    sunglassFilter.postMessage(imagedata);
    // Worker 接口的onmessage属性表示一个EventHandler事件处理函数，当message 事件发生时，该函数被调用。
    sunglassFilter.onmessage = function (event) {
      offscreenCtx.putImageData(event.data, 0, 0);
      drawLenses(leftLensLocation, rightLensLocation);
      drawWire(center);
      drawConnectors(center);
    };
  }

  image.src = "./7.jpeg";
  image.onload = function () {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  };
  btn.onclick = function () {
    if (sunglassOn) {
      // 关闭
      console.log("关闭");
      btn.innerText = "sunglasses";

      drawOriginalPicture();
    } else {
      // 加滤镜
      console.log("加滤镜");
      btn.innerText = "original picture";
      putSunglassesOn();
    }
    sunglassOn = !sunglassOn;
  };
};
